<template>
  <el-container class="page">
    <el-aside
      width="200px"
      :style="{height:''+contentHeight+'',padding:'20px 0 0 20px',color:'#606266',fontWeight:'bold'}"
    >
      <span>产品名称</span>
      <el-select
        v-model="productName"
        filterable
        placeholder="请选择"
        style="margin-right:30px;margin:0 30px 20px 0"
        @focus="queryProduct"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>产品类型</span>
      <el-select
        v-model="productType"
        filterable
        placeholder="请选择"
        style="margin-right:30px"
        @focus="queryType"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-aside>
    <el-main :style="{height:''+contentHeight+''}">
      <div id="chart" style="width:100%;height:380px;" />
      <div>
        <el-table
          ref="table"
          :data="tableData"
          highlight-current-row
          :height="tableHeight"
          style="overflow: auto;width:100%"
          border
        >
          <el-table-column
            v-for="item in tableHead"
            :key="item.label"
            :label="item.label"
            :property="item.property"
            :width="item.width"
          />
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      tableHeight: document.documentElement.clientHeight - 545 + 'px',
      contentHeight: document.documentElement.clientHeight - 120 + 'px',
      productName: '',
      productType: '',
      options: [],
      tableData: [],
      tableHead: [],
      option: {
        title: {
          text: '生产周期'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['bar', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  watch: {
    tableHeight (val) {
      this.tableHeight = val - 440 + 'px'
    }
  },
  created () {},
  mounted () {
    this.info()
    this.tableHeight = document.documentElement.clientHeight - 545 + 'px'
    const that = this
    window.onresize = () => {
      return () => {
        that.tableHeight = document.documentElement.clientHeight - 545 + 'px'
      }
    }
  },
  methods: {
    info () {
      this.tableHead.push(
        { label: '产品名称', property: 'a0', width: '140px' },
        { label: '1月', property: 'a' },
        { label: '2月', property: 'b' },
        { label: '3月', property: 'c' },
        { label: '4月', property: 'd' },
        { label: '5月', property: 'e' },
        { label: '6月', property: 'f' },
        { label: '7月', property: 'g' },
        { label: '8月', property: 'h' },
        { label: '9月', property: 'i' },
        { label: '10月', property: 'j' },
        { label: '11月', property: 'k' },
        { label: '12月', property: 'l' }
      )
      const xdata = [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ]
      const serviceData = [
        {
          name: '产品1',
          type: 'line',
          data: [2716, 189, 105, 630, 106, 339, 860, 30, 1236, 439, 620, 410]
        },
        {
          name: '产品2',
          type: 'line',
          data: [276, 1894, 310, 230, 126, 379, 360, 230, 826, 309, 200, 30]
        },
        {
          name: '产品3',
          type: 'line',
          data: [576, 289, 130, 20, 426, 369, 160, 430, 126, 39, 360, 30]
        },
        {
          name: '产品4',
          type: 'line',
          data: [176, 489, 210, 230, 126, 39, 560, 630, 66, 319, 160, 430]
        }
      ]
      this.drawline(xdata, serviceData)
    },
    drawline (xdata, serviceData) {
      var echarts = require('echarts')
      var myChart = echarts.init(document.getElementById('chart'))
      this.option.xAxis[0].data = xdata
      const name = []
      serviceData.forEach(m => {
        this.option.series.push(m)
        name.push(m.name)
      })
      this.option.legend.data = name
      myChart.setOption(this.option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    queryProduct () {},
    queryType () {}
  }
}
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.page /deep/ .el-table .cell {
  text-align: center;
}
.page {
  background: #f5f5f5;
  padding: 10px 10px 0 0;
}
.page /deep/ .el-aside,
.page /deep/ .el-main {
  box-shadow: 0 2px 12.8px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: #fff;
  margin-left: 10px;
}
  .page /deep/ .el-table th{
  background:#e8e8e8;
  color:#444;
}
</style>
